<template>
  <div class="app-container">
    <div class="zc-table-common">
      <div class="zc-table-search">
        <div class="search-quest">
          <span class="search-quest-title">日期：</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="search-quest">
          <el-button @click.native="clearSearch">清空条件</el-button>
          <el-button type="primary" @click.native="searchTable">搜索</el-button>
        </div>
      </div>
      <div class="zc-table-event-btn">
        <el-button type="primary" :disabled="selectList.length < 1" @click.native="deleteALLEvent()">批量删除</el-button>
      </div>
      <div class="zc-table-body">
        <el-table
          :data="logsTable.data"
          :empty-text="emptyText"
          v-loading="tableLoading"
          @selection-change="handleSelectionChange"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="80">
          </el-table-column>
          <el-table-column
            prop="logId"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="method"
            label="方法名">
          </el-table-column>
           <el-table-column
            prop="msg"
            width="400"
            label="报错信息">
            <template slot-scope="scope">
              <div class="zc-col-view" @click="viewcontent(scope.row.logId)">{{scope.row.msg}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="clazz"
            label="URL">
          </el-table-column>
          <el-table-column
            prop="logLevel"
            label="等级">
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="180"
            label="日期">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | formatTime(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click.native="deleteEvent(scope.row.logId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="zc-page-box">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageInfo.pageSize"
            :current-page="pageInfo.curPage"
            :total="logsTable.total"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="日志详情"
      custom-class="dialog-wrap" 
      :visible.sync="dialogInfo.dialogFlag" 
      width="50%" 
      top="15vh" 
      :close-on-click-modal="dialogInfo.default" 
      :close-on-press-escape="dialogInfo.default"
      >
      <div class="dialog-container">
        <div class="log-info">
          <span>logId：</span>
          <span>{{logInfoData.logId}}</span>
        </div>
        <div class="log-info">
          <span>时间：</span>
          <span>{{logInfoData.createTime | formatTime(2)}}</span>
        </div>
        <div class="log-info">
          <span>方法：</span>
          <span>{{logInfoData.method}}</span>
        </div>
        <div class="log-info">
          <span>等级：</span>
          <span>{{logInfoData.logLevel}}</span>
        </div>
        <div class="log-info">
          <span>来源URL：</span>
          <span>{{logInfoData.clazz}}</span>
        </div>
        <div class="log-info">
          <span>日志内容：</span>
          <span>{{logInfoData.msg}}</span>
        </div>
        <div class="log-info">
          <span>报错详情：</span>
          <span>{{logInfoData.exception}}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { GetLogsTable, GetLogsSingle, DeleteLogs } from '@/api/requestConfig'
  import { formatTime } from '@/filters/index'
  export default {
    name: 'LogsTable',
    created() {
      // 获取日志表格
      this.getLogsTable()
    },
    data() {
      return {
        dateRange: [],
        selectList: [],
        emptyText: '未匹配到日志数据',
        logInfoData: {},
        logsTable: {},
        pageInfo: {
          curPage: 1,
          pageSize: 20
        },
        dialogInfo: {
          dialogFlag: false,
          default: false
        },
        tableLoading: true
      }
    },
    methods: {
      // 清空搜索条件
      clearSearch() {
        this.dateRange = []
        this.getLogsTable()
      },
      // 搜索
      searchTable() {
        this.pageInfo.curPage = 1
        this.getLogsTable()
      },
      // 分页
      changePage(nowPage) {
        this.pageInfo.curPage = nowPage
        this.getLogsTable()
      },
      // 获取日志表格
      getLogsTable() {
        this.tableLoading = true
        var needData = {}
        needData.curPage = this.pageInfo.curPage
        needData.pageSize = this.pageInfo.pageSize
        if (this.dateRange.length > 0) {
          needData.startTime = formatTime(this.dateRange[0].getTime()) + ' 00:00:00'
          needData.endTime = formatTime(this.dateRange[1].getTime()) + ' 23:59:59'
        }
        GetLogsTable(needData).then(res => {
          if (res.data) {
            this.logsTable = res
          } else {
            this.$message.error(res.message)
          }
          this.tableLoading = false
        })
      },
      // 查看日志信息
      viewcontent(rowId) {
        this.dialogInfo.dialogFlag = !this.dialogInfo.dialogFlag
        GetLogsSingle(rowId).then(res => {
          if (res.data) {
            this.logInfoData = res.data
          }
        })
      },
      // 表格复选框
      handleSelectionChange(val) {
        this.selectList = val
      },
      // 删除日志
      deleteEvent(Id) {
        this.$confirm('是否删除此日志?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.requestDelete(Id)
        }).catch(() => {})
      },
      // 批量删除
      deleteALLEvent() {
        this.$confirm('是否删除选中的日志?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          var needArr = []
          this.selectList.map(x => {
            needArr.push(x.logId)
          })
          this.requestDelete(needArr.toString())
        }).catch(() => {})
      },
      // 请求删除
      requestDelete(ids) {
        DeleteLogs(ids).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.searchTable()
          } else {
            this.$message.error(res.message)
          }
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/zc-table-common.scss";
  .log-info{
    padding: 5px 0;
  }
</style>
